<!--
Open Bank Project - API
Copyright (C) 2011-2019, TESOBE GmbH.

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.

Email: contact@tesobe.com
TESOBE GmbH
Osloerstrasse 16/17
Berlin 13359, Germany

  This product includes software developed at
  TESOBE (http://www.tesobe.com/)
  by
  Simon Redfern : simon AT tesobe DOT com
  Sebastian Henschel: sebastian AT tesobe DOT com
-->
<div id="main" data-lift="surround?with=default;at=content">

	<div id="main-about" data-lift="WebUI.aboutBackground">
		<div class="row">
			<div class="col-xs-12 col-md-5"></div>
			<div class="col-xs-12 col-md-7">
				<div id="main-about-box">
					<div id="main-about-text" data-lift="WebUI.aboutText">
						<h2>Welcome to the API Sandbox powered by the Open Bank Project!</h2>
						<p>This API, powered by the Open Bank Project, provides standard RESTful interfaces for developers to create customer facing and backend applications.<br> </p>
					</div>
					<div id="main-about-buttons">
						<a href="/consumer-registration" class="btn btn-default">GET API KEY</a>
						<a class="api-explorer-link btn btn-default" data-lift="WebUI.apiExplorerLink" href="">API EXPLORER</a>
						<a class="sofi-link btn btn-default" data-lift="WebUI.sofiLink" href="">SOFIT</a>
						<a id="sandbox-introduction-link" class="btn btn-default" data-lift="WebUI.sandboxIntroductionLink" href="">INTRODUCTION</a>
					</div>
				</div>
			</div>
		</div>
	</div>
	

	<div id="main-get-started">
		<h1>Get Started</h1>
		<div class="row">
			<div class="visible-md visible-lg col-md-5 main-get-started-icon">
				<img class="create-account" src="https://static.openbankproject.com/images/sandbox/get-started/create_account.png" width="260" height="260" alt="create account" />
			</div>
			<div class="visible-md visible-lg col-md-2 main-get-started-item">
				<img class="item-1" src="https://static.openbankproject.com/images/sandbox/get-started/item-1.png" width="75" height="300" alt="item-1" />
			</div>
			<div class="col-xs-12 col-md-5 main-get-started-text">
				<h2>Create an account</h2>
				<p>First, create a free developer account on this sandbox and request a developer key. You will be asked to submit basic information about your app at this stage. Register <a href="/user_mgt/sign_up">here</a>.</p>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-12 col-md-5 main-get-started-text">
				<h2>Connect your app</h2>
				<p>Use our SDKs to connect your app to the Open Bank Project APIs. You will need your developer key, which was provided to you when you created an account. See all available APIs on the API Explorer. Please make sure you are using the correct base URL.</p>
			</div>
			<div class="visible-md visible-lg col-md-2 main-get-started-item">
				<img class="item-2" src="https://static.openbankproject.com/images/sandbox/get-started/item-2.png" width="75" height="300" alt="item-2" />
			</div>
			<div class="visible-md visible-lg col-md-5 main-get-started-icon">
				<img class="connect-app" src="https://static.openbankproject.com/images/sandbox/get-started/connect_app.png" width="370" height="260" alt="connect app" />
			</div>
		</div>
		<div class="row">
			<div class="visible-md visible-lg col-md-5 main-get-started-icon">
				<img class="test-data" src="https://static.openbankproject.com/images/sandbox/get-started/test_data.png" width="285" height="270" alt="test data" />
			</div>
			<div class="visible-md visible-lg col-md-2 main-get-started-item">
				<img class="item-3" src="https://static.openbankproject.com/images/sandbox/get-started/item-3.png" width="75" height="300" alt="item-3" />
			</div>
			<div class="col-xs-12 col-md-5 main-get-started-text">
				<h2>Test your app using customer data</h2>
				<p>Once your app is connected, you can test it using test customer credentials. <strong>You can find a list of sandbox customer logins <a class="example_sandbox_credentials_link" data-lift="WebUI.exampleSandboxCredentialsLink" href="https://github.com/OpenBankProject/OBP-API/wiki/">HERE</a>.</strong></p>
			</div>
		</div>

		<div class="bigbutton">
			<a href="/consumer-registration">Get your API key</a>
		</div>
	</div>


<!--
<div id="get-started-control" data-lift="WebUI.getStartedContentLoader">
	<div id="override-get-started-script"></div>
</div>
-->

	<div id="get-started-script" data-lift="WebUI.getStartedContentLoader"></div>



	<div id="main-apis">
		<h1>Your APIs</h1>
		<div class="row">
			<a class="api-explorer-link" data-lift="WebUI.apiExplorerLink?tags=Account,Card" href="">
				<div class="col-xs-12 col-sm-2 col-lg-1 main-apis-icon">
					<img class="icon-accounts" src="https://static.openbankproject.com/images/sandbox/icons/icon-accounts.png" width="100" height="100" alt="accounts" />
				</div>
				<div class="col-xs-12 col-sm-4 col-lg-5 main-apis-text">
					<h2>Accounts</h2>
					<p>Access to accounts (XS2A) and cards. Provide fine-grained access to guests (auditor, accountant or public). Explore.. </p>
				</div>

			</a>

			<a class="api-explorer-link" data-lift="WebUI.apiExplorerLink?tags=Bank,Bank-Branch,Bank-ATM,Bank-Product,Bank-FX" href="">
				<div class="col-xs-12 col-sm-2 col-lg-1 main-apis-icon">
					<img class="icon-entitlements" src="https://static.openbankproject.com/images/sandbox/icons/icon-branches.png" width="100" height="100" alt="branches" />
				</div>
				<div class="col-xs-12 col-sm-4 col-lg-5 main-apis-text">
					<h2>Branches, ATMs and Products</h2>
					<p>Access open data related to banks including branches and ATMs including geolocation and opening hours. Explore..</p>
				</div>

			</a>
		</div>

		<div class="row">
			<a class="api-explorer-link" data-lift="WebUI.apiExplorerLink?tags=Transaction,Transaction-Metadata" href="">
				<div class="col-xs-12 col-sm-2 col-lg-1 main-apis-icon">
					<img class="icon-transactions" src="https://static.openbankproject.com/images/sandbox/icons/icon-transactions.png" width="100" height="100" alt="transactions" />
				</div>
				<div class="col-xs-12 col-sm-4 col-lg-5 main-apis-text">
					<h2>Transactions</h2>
					<p>Access the transaction history and transaction metadata. Explore..</p>
				</div>
			</a>

			<a class="api-explorer-link" data-lift="WebUI.apiExplorerLink?tags=Transaction-Metadata,Counterparty-Metadata" href="">
				<div class="col-xs-12 col-sm-2 col-lg-1 main-apis-icon">
					<img class="icon-metadata" src="https://static.openbankproject.com/images/sandbox/icons/icon-metadata.png" width="100" height="100" alt="metadata" />
				</div>
				<div class="col-xs-12 col-sm-4 col-lg-5 main-apis-text">
					<h2>Metadata</h2>
					<p>Enrich transactions and counterparties with metadata including geolocations, comments, pictures and tags (e.g. category of spending). Explore..</p>
				</div>
			</a>


		</div>

		<div class="row">

			<a class="api-explorer-link" data-lift="WebUI.apiExplorerLink?tags=Counterparty,Counterparty-Metadata" href="">
				<div class="col-xs-12 col-sm-2 col-lg-1 main-apis-icon">
						<img class="icon-counterparties" src="https://static.openbankproject.com/images/sandbox/icons/icon-counterparties.png" width="100" height="100" alt="counterparties" />
				</div>
				<div class="col-xs-12 col-sm-4 col-lg-5 main-apis-text">
					<h2>Counterparties</h2>
					<p>Access the payers &amp; payees of an account including metadata such as their aliases, labels, logos and home pages. Explore..</p>
				</div>
			</a>

			<a class="api-explorer-link" data-lift="WebUI.apiExplorerLink?tags=Webhook" href="">
				<div class="col-xs-12 col-sm-2 col-lg-1 main-apis-icon">
					<img class="icon-branches" src="https://static.openbankproject.com/images/sandbox/icons/icon-entitlements.png" width="100" height="100" alt="entitlements" />
				</div>
				<div class="col-xs-12 col-sm-4 col-lg-5 main-apis-text">
					<h2>Webhooks</h2>
					<p>Call external web servies based on Account events. Explore..</p>
				</div>
			</a>
		</div>

		<div class="row">
			<a class="api-explorer-link" data-lift="WebUI.apiExplorerLink?tags=Customer,KYC,Onboarding" href="">
				<div class="col-xs-12 col-sm-2 col-lg-1 main-apis-icon">
					<img class="icon-messages" src="https://static.openbankproject.com/images/sandbox/icons/icon-messages.png" width="100" height="100" alt="messages" />
				</div>
				<div class="col-xs-12 col-sm-4 col-lg-5 main-apis-text">
					<h2>Customer onboarding and KYC</h2>
					<p>Perform user, customer and account creation. Manage Know Your Customer (KYC) documents, media and status. Create customer meetings and messages. Explore..</p>
				</div>
			</a>

			<a class="api-explorer-link" data-lift="WebUI.apiExplorerLink?tags=API,API-Role,API-Metrics,API-Documentation" href="">
				<div class="col-xs-12 col-sm-2 col-lg-1 main-apis-icon">
					<img class="icon-security" src="https://static.openbankproject.com/images/sandbox/icons/icon-security.png" width="100" height="100" alt="security" />
				</div>
				<div class="col-xs-12 col-sm-4 col-lg-5 main-apis-text">
					<h2>API Roles, Metrics and Documentation</h2>
					<p>Control access to endpoints, get API metrics and documentation. Explore..</p>
				</div>
			</a>


		</div>
		<div class="row">
			<a class="api-explorer-link" data-lift="WebUI.apiExplorerLink?tags=Transaction-Request" href="">
				<div class="col-xs-12 col-sm-2 col-lg-1 main-apis-icon">
					<img class="icon-requests" src="https://static.openbankproject.com/images/sandbox/icons/icon-requests.png" width="100" height="100" alt="requests" />
				</div>
				<div class="col-xs-12 col-sm-4 col-lg-5 main-apis-text">
					<h2>Payments & Transfers</h2>
					<p>Initiate Transaction Requests (transfers and payments). View and confirm charges (as per PSD2). Answer strong customer authentication (SCA) challenges. Explore..</p>
				</div>
			</a>

			<a class="api-explorer-link" data-lift="WebUI.apiExplorerLink?tags=Data-Warehouse" href="">
				<div class="col-xs-12 col-sm-2 col-lg-1 main-apis-icon">
					<img class="icon-kyc" src="https://static.openbankproject.com/images/sandbox/icons/icon-kyc.png" width="100" height="100" alt="kyc" />
				</div>
				<div class="col-xs-12 col-sm-4 col-lg-5 main-apis-text">
					<h2>Search warehouse</h2>
					<p>Perform advanced searches and statistics queries on the data warehouse. Explore..</p>
				</div>
			</a>
		</div>
	</div>


	<div id="main-apiexplorer" class="bigbutton">
		<a class="api-explorer-link" data-lift="WebUI.apiExplorerLink" href="">Go to API Explorer</a>
	</div>


	<div id="main-showcases" data-lift="WebUI.featuredSdksHtml">
	</div>



	<div id="main-faq">
		<h1>Technical FAQs</h1>

		<div class="row">
			<div class="hidden-xs col-sm-1"></div>
			<div class="col-xs-12 col-sm-5">
				<div data-toggle="collapse" data-target="#main-faq-item0" class="collapsed main-faq-button">
					<h2>What is the correct base URL for this sandbox?</h2>
					<p id="main-faq-item0" class="collapse">
						The base URL is<br />
						<a class="api-link" data-lift="WebUI.apiLink" href="">http://apisandbox.openbankproject.com</a><br />
						Please make sure you are using this in all your API calls
					</p>
				</div>
			</div>
			<div class="col-xs-12 col-sm-5">
				<div data-toggle="collapse" data-target="#main-faq-item1" class="collapsed main-faq-button">
					<h2>I got a 404 error, what am I doing wrong</h2>
					<ol id="main-faq-item1" class="collapse">
						<li>
							Avoid using trailing slashes, else, you would get a 404 error. Example:<br />
							.../obp/v1.4.0 200 OK<br />
							.../obp/v1.4.0/ 404 Not Found<br />
						</li>
						<li>Double check parameters are spelt correctly (including http vs https etc.)</li>
						<li>Check your encoding (use UTF8)</li>
					</ol>
				</div>
			</div>
			<div class="hidden-xs col-sm-1"></div>
		</div>

		<div class="row">
			<div class="hidden-xs col-sm-1"></div>
			<div class="col-xs-12 col-sm-5">
				<div data-toggle="collapse" data-target="#main-faq-item2" class="collapsed main-faq-button">
					<h2>How should I login?</h2>
					<p id="main-faq-item2" class="collapse">
						There are two ways to authenticate a user: <a href="https://github.com/OpenBankProject/OBP-API/wiki/OAuth-Client-SDKS">OAuth</a> and <a href="https://github.com/OpenBankProject/OBP-API/wiki/Direct-Login">Direct Login</a>. If you are using this sandbox for a hackathon, we recommend you use Direct Login to authenticate as it is easier than the OAuth workflow.
					</p>
				</div>
			</div>

			<div class="col-xs-12 col-sm-5">
				<div data-toggle="collapse" data-target="#main-faq-item3" class="collapsed main-faq-button">
					<h2>How can I use OAuth or Direct Login?</h2>
					<p id="main-faq-item3" class="collapse">
						If you want to use OBP with OAuth, we recommend you use (and fork) one of our <a href="https://github.com/OpenBankProject/OBP-API/wiki/OAuth-Client-SDKS">OAuth Starter SDKs</a>.
						If you are using this sandbox for a hackathon, we recommend you use <a class="direct-login-documentation-url" data-lift="WebUI.directLoginDocumentationUrl" href="">Direct Login</a>.
						For an OAuth walkthrough example with sample code, please see <a href="http://obp.sckhoo.com/">here</a>. We use OAuth 1.0a. For deepish technical details of the flow <a class="oauth-1-documentation-url" data-lift="WebUI.oauth1DocumentationUrl" href="">see here.</a><br />
						We also support OAuth 2.0. For the technical details of using OBP API with OAuth 2.0, please <a class="oauth-2-documentation-url" data-lift="WebUI.oauth2DocumentationUrl" href="">see here.</a><br />
					</p>
				</div>
			</div>
			<div class="hidden-xs col-sm-1"></div>
		</div>

		<div class="row">
			<div class="hidden-xs col-sm-1"></div>
			<div class="col-xs-12 col-sm-5">
				<div data-toggle="collapse" data-target="#main-faq-item4" class="collapsed main-faq-button">
					<h2>Where can I read the API documentation?</h2>
					<p id="main-faq-item4" class="collapse">
						Please use the <a class="api-explorer-link" data-lift="WebUI.apiExplorerLink" href="">API Explorer</a>
					</p>

				</div>
			</div>
			<div class="col-xs-12 col-sm-5">
				<div data-toggle="collapse" data-target="#main-faq-item5" class="collapsed main-faq-button">
					<h2>How can I use the example customer data?</h2>
					<p id="main-faq-item5" class="collapse">
						You will need to login to the API as a sandbox customer. You can do this using the API Explorer, or any REST client. You can find some example credentials <a class="example_sandbox_credentials_link" data-lift="WebUI.exampleSandboxCredentialsLink" href="https://github.com/OpenBankProject/OBP-API/wiki/">here</a>.</p>
									</div>
			</div>
			<div class="hidden-xs col-sm-1"></div>
		</div>

		<div class="row">
			<div class="hidden-xs col-sm-1"></div>
			<div class="col-xs-12 col-sm-5">
				<div data-toggle="collapse" data-target="#main-faq-item6" class="collapsed main-faq-button">
					<h2>Where does the data come from?</h2>
					<p id="main-faq-item6" class="collapse faq-data-text" data-lift="WebUI.faqDataText">Text is replaced</p>
				</div>
			</div>
			<div class="col-xs-12 col-sm-5">
				<div data-toggle="collapse" data-target="#main-faq-item7" class="collapsed main-faq-button">
					<h2>Where can i get more information and support?</h2>
					<p id="main-faq-item7" class="collapse">
						Please refer to our <a class="faq-link" data-lift="WebUI.faqLink" href="" target="_blank">FAQ</a>, <a class="glossary-link" data-lift="WebUI.glossaryLink" href="" target="_blank">Glossary</a>, join our <a class="support-platform-link" data-lift="WebUI.supportPlatformLink" href="" target="_blank">Slack channels</a> or email us at <a class="faq-email" data-lift="WebUI.faqEmail" href="">contact@openbankproject.com</a></p>
				</div>
			</div>
			<div class="hidden-xs col-sm-1"></div>
		</div>
	</div>


	<div id="main-start_building">
		<h1 name="get-started" data-lift="WebUI.getStartedText">Get started building your application using this sandbox now</h1>
		<div class="bigbutton">
			<a href="/consumer-registration">Get your API key</a>
		</div>
	</div>



	<div id="main-partners" class="lift:WebUI.createMainPartners">
		<a href="">
			<img src="" alt="">
		</a>
	</div>

	

	<div id="main-support">
		<h1>For technical support</h1>
		<div class="main-support-item">
			<img class="support-mail" src="https://static.openbankproject.com/images/sandbox/support/mail.png" width="150" height="150" alt="mail" />
			<h2>Email us</h2>
			<a href="mailto:contact@openbankproject.com">contact@openbankproject.com</a>
		</div>
		<div class="main-support-item">
			<img class="support-twitter" src="https://static.openbankproject.com/images/sandbox/support/twitter.png" width="150" height="150" alt="twitter" />
			<h2>Twitter</h2>
			<a href="https://twitter.com/openbankproject">@OpenBankProject</a>
		</div>
		<div class="main-support-item">
			<img class="support-slack" src="https://static.openbankproject.com/images/sandbox/support/slack.png" width="150" height="150" alt="slack" />
			<h2>Chat</h2>
			<a class="support-platform-link" data-lift="WebUI.supportPlatformLink" href="" target="_blank">Slack channel</a>
		</div>
	</div>



	<div id="vendor-support"></div>
	<div id="vendor-support-script" data-lift="WebUI.vendorSupportContentLoader"></div>


	<div id="about-vendor"></div>
	<div id="about-vendor-script" data-lift="WebUI.aboutVendorContentLoader"></div>



<!-- Testing approach for loading content.
	<div data-lift="lazy-load">
		<div id="test-div" data-lift="WebUI.aboutVendorDirectContentLoader"></div>
	</div>
-->


	<div id="for-banks" name="for-banks" data-lift="WebUI.forBanks" >
		<h1>For Banks</h1>
		<a class="api-manager-link btn btn-default btn-for-banks" data-lift="WebUI.apiManagerLink" href="">API Manager</a>
		<a class="obp-cli-link btn btn-default btn-for-banks" data-lift="WebUI.obpCliLink" href="">OBP CLI</a>
		<a class="api-tester-link btn btn-default btn-for-banks" data-lift="WebUI.apiTesterLink" href="">API Tester</a>
	</div>


</div>
